<template>
    <div>
      <div class="search">
          <div class="input">
              <p><label>类目标题</label><el-input placeholder="请输入内容" label="条件" v-model="pageData.title"></el-input></p>
              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="add">新增</el-button>
      </div>
      <tableVue :list="list" :state="false" :radioShwo="false"  v-loading="pageData.loading" :total="total">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.row,1)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="handleEdit(scope.row,2)">删除</el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>
      <dialogVue title="新增类目" :dialog="dialog" @close="changeData" :state="false">
          <slot>
              <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="类目名称" prop="content">
                      <el-input v-model="pageData.typeName" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="content">
                      <el-input v-model="pageData.remark" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item class="confirm">
                     <el-button type="primary" v-if="btnState == '1'" @click="submitForm('ruleForm')">创建</el-button>
                     <el-button type="primary" v-if="btnState == '2'" @click="upForm('ruleForm')">更新</el-button>
                 </el-form-item>
              </el-form>
          </slot>
      </dialogVue>
    </div>
</template>

<script>
  import Data from './issueClassData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import {
    helpType,
    helpList,
    addHelp,
    addIssueClass,
    issueClassList,
    upIssueClass,
    delIssueClass
  } from "@/api/help/help";
  export default {
    components : {
      tableVue,
      dialogVue
    },
     data () {
       return JSON.parse(JSON.stringify(Data))
     },
     mounted () {
       this.getIssueClassList();
     },
     methods : {
       getIssueClassList () {
         this.pageData.loading = true;
         issueClassList().then(res=>{
           if (res.data.code == 'OK') {
                this.list.tbody = res.data.data.records.map(item=>{
                  item.gmtCreate = this.switchTime(item.gmtCreate)
                  item.gmtUpdate = this.switchTime(item.gmtUpdate)
                  return item;
                })
                this.pageData.loading = false;
                this.total = res.data.data.total;
           } else {
             this.$message.error(res.data.message);
             this.pageData.loading = false;
           }
         })
       },
       add() {
          this.dialog = true;
          this.pageData = {};
          this.btnState = '1'
       },
       changeData (val) {
           this.dialog = val
       },
       handleEdit(item,num){
         if (num == 1) {
           this.btnState = '2'
           this.dialog = true;
           this.pageData.typeName = item.typeName
           this.pageData.remark = item.remark
           this.pageData.typeId = item.typeId
         } else {
            this.delMessage(()=>{
              delIssueClass(item.typeId).then(res=>{
                if (res.data.code == 'OK') {
                  this.$message.success("删除成功");
                  this.getIssueClassList();
                } else {
                  this.$message.error(res.data.message);
                }
              })
            })
         }
       },
       submitForm () {
         this.$refs.ruleForm.validate((valid)=>{
           if (valid) {
             let data = {
               typeName : this.pageData.typeName,
               remark : this.pageData.remark
             }
             addIssueClass(data).then(res=>{
               if(res.data.code == 'OK') {
                 this.$message.success("新增成功");
                 this.dialog = false;
                 this.getIssueClassList();
               } else {
                   this.$message.error(res.data.message);
               }
             })
           }
         })
       },
       upForm () {
         let data = {
           typeName : this.pageData.typeName,
           remark : this.pageData.remark,
           typeId : this.pageData.typeId
         }
          upIssueClass(data).then(res=>{
            if (res.data.code == 'OK') {
               this.$message.success("编辑成功");
               this.getIssueClassList();
               this.dialog = false;
            } else {
               this.$message.error(res.data.message);
            }
          })
       },
       search () {
         var data = {
           typeName : this.pageData.title
         }
         issueClassList(data).then(res=>{
           if (res.data.code == 'OK') {
               this.$message.success("搜索成功");
           } else {
             this.$message.error(res.data.message);
           }
         })
       }
     }
  }
  </script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
